@import '../../../app/mixins.css';

:root {
  --info-icon-size: 14px;
  --info-icon-font-size: 9px;
  --tooltip-spacing-inside: 10px;
  --tooltip-spacing-inside-m: 7.5px;
  --tooltip-spacing-inside-s: 5px;
}

.tooltipWrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;

  &:global(.showOnBottom),
  &:global(.showOnTop) {
    & .tooltip {
      left: 50%;
      right: auto;
      transform: translateY(0) translateX(-50%);

      & .tooltipArrow {
        left: calc(50% - 6px);
      }
    }
  }

  &:global(.showOnBottom) {
    & .tooltip {
      bottom: auto;
      top: calc(100% + 16px);

      & .tooltipArrow {
        bottom: auto;
        top: -20px;
        transform: rotate(90deg);
      }
    }
  }

  &:global(.showOnTop) {
    & .tooltip {
      bottom: calc(100% + 16px);
      top: auto;

      & .tooltipArrow {
        bottom: -20px;
        top: auto;
        transform: rotate(-90deg);
      }
    }
  }

  &:global(.showOnLeft) {
    & .tooltip {
      right: calc(-100% + 48px);
      left: auto;

      & .tooltipArrow {
        left: auto;
        right: -12px;
        top: calc(50% - 15px);
        transform: rotate(180deg);
      }
    }
  }
}

.infoIcon {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: var(--info-icon-size);
  justify-content: center;
  margin-left: 5px;
  width: var(--info-icon-size);
}

.tooltip {
  @mixin contentLarge;

  background-color: var(--color-white);
  border: 1px solid var(--color-platinum);
  border-radius: var(--border-radius-standard);
  box-shadow: var(--box-shadow-standard);
  box-sizing: border-box;
  color: var(--color-slate-gray);
  left: calc(100% + 15px);
  max-width: 380px;
  opacity: 0;
  padding: 20px;
  position: absolute;
  text-align: left;
  top: 50%;
  transform: translateY(-50%);
  transition:
    visibility var(--animation-speed-fast) linear,
    opacity var(--animation-speed-fast) linear;
  visibility: hidden;
  width: 45vw; /* stylelint-disable-line */
  z-index: var(--overlay-index);
  word-break: initial;

  & .tooltipArrow {
    color: var(--color-white);
    height: 28px;
    left: -12px;
    position: absolute;
    stroke: var(--color-platinum);
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
  }

  &:global(.shownTooltip) {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
  }

  & p {
    margin: 0;
  }

  & .title {
    @mixin contentNormal bold;

    color: var(--color-maastricht-blue);
  }

  & a {
    @mixin contentLarge bold;

    color: var(--color-ultramarine-blue);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  & > header {
    margin-bottom: var(--tooltip-spacing-inside);
  }

  & > footer {
    margin: 0;
    margin-top: var(--tooltip-spacing-inside);
    padding: 0;
  }

  &.s {
    padding: 16px 20px;
    width: auto;
    max-width: 286px;

    & > header {
      margin-bottom: var(--tooltip-spacing-inside-s);
    }

    & > footer {
      margin-top: var(--tooltip-spacing-inside-s);
    }

    & p {
      font-size: inherit;
    }
  }
}
